<script setup lang="ts">
import { computed, ref } from 'vue';
import { $t } from '@/locales';
import { useForm, useFormRules } from '@/hooks/common/form';
import { ApiSysUserLoginRuleQuery } from '@/api-services';
import { NetoKit } from '@/typings/neto';

defineOptions({
  name: 'UserLoginRuleSearch'
});

interface Emits {
  (e: 'reset'): void;
  (e: 'search'): void;
}

const emit = defineEmits<Emits>();

const { formRef, validate, restoreValidation } = useForm();

type ModelType = NetoKit.NullToUndefined<ApiSysUserLoginRuleQuery>;
const model = defineModel<ModelType>('model', { required: true });


const datetimepickerGroupRef = ref();
async function reset() {
  await restoreValidation();
  //清空日期,但是现在不知道为什么清空不了
  // datetimepickerGroupRef.value.reset();
  emit('reset');
}

async function search() {
  await validate();
  emit('search');
}

// 添加一个计算属性来处理 isEnable 的布尔值到字符串的映射
const isEnableString = computed({
  get: () => {
    switch (model.value.isEnable) {
      case true: return 'true';
      case false: return 'false';
      default: return undefined;
    }
  },
  set: (value) => {
    switch (value) {
      case 'true': model.value.isEnable = true; break;
      case 'false': model.value.isEnable = false; break;
      default: model.value.isEnable = undefined; break;
    }
  }
});


</script>

<template>

  <ElCard class="card-wrapper" :header="$t('common.search')">
    <ElForm ref="formRef" :model="model" label-width="auto">
      <ElRow :gutter="16" wrap>

        <ElCol :span="24" :md="12" :lg="6">
          <ElFormItem :label="$t('page.manage.common.loginRuleType')" name="loginRuleType">
            <ElSelect v-model="model.loginRuleType" :placeholder="$t('page.manage.common.form.loginRuleType')"
              allow-clear>
              <ElOption :value="1" :label="$t('page.manage.common.loginRuleTypeEnum.pwd')" />
              <ElOption :value="2" label="Ip" />
            </ElSelect>
          </ElFormItem>
        </ElCol>
        <ElCol :span="24" :md="12" :lg="6">
          <ElFormItem :label="$t('common.timeRange')">
            <DatetimepickerGroup ref="datetimepickerGroupRef" v-model:start-time="model.startDate"
              v-model:end-time="model.endDate">
            </DatetimepickerGroup>
          </ElFormItem>
        </ElCol>


        <ElCol :span="24" :md="12" :lg="6">
          <ElFormItem :label="$t('common.keyword')" name="keyWords">
            <ElInput v-model="model.keyWords" :placeholder="$t('common.keywordSearch')" />
          </ElFormItem>
        </ElCol>

        <ElCol :span="24" :md="12" :lg="6">
          <ElFormItem :label="$t('page.manage.common.isEnable')" prop="isEnable">
            <ElRadioGroup v-model="model.isEnable">
              <ElRadio :value="true">{{ $t('common.yesOrNo.yes') }}</ElRadio>
              <ElRadio :value="false">{{ $t('common.yesOrNo.no') }}</ElRadio>
            </ElRadioGroup>
          </ElFormItem>
        </ElCol>
        <ElCol :md="24" :sm="24">
          <ElSpace class="w-full justify-end" alignment="end">
            <ElButton @click="reset">
              <template #icon>
                <icon-ic-round-refresh class="text-icon" />
              </template>
              {{ $t('common.reset') }}
            </ElButton>
            <ElButton type="primary" plain @click="search">
              <template #icon>
                <icon-ic-round-search class="text-icon" />
              </template>
              {{ $t('common.search') }}
            </ElButton>
          </ElSpace>
        </ElCol>
      </ElRow>
    </ElForm>
  </ElCard>
</template>

<style scoped></style>
